<template>
  <view class="c-select" :style="{ width }" :class="ggclass">
    <view
      class="title-box"
      @click="fole"
      :style="{ height, border, padding, display }"
    >
      <slot :row="row">
        <text :class="nameClass">{{ name || hint }}</text>
        <text
          :style="{ transform: `rotate(${show ? 180 : 0}deg)` }"
          class="iconfont icon-xiajiantou icon"
        ></text>
      </slot>
    </view>
    <view class="mask" v-if="isFold" @click="fole"></view>
    <view
      class="select"
      ref="content"
      :class="{ boxShadow: isFold }"
      :style="{
        visibility: show ? 'visible' : 'hidden',
        height: heights === 'auto' ? '' : heights + 'px',
        width: selectWidth,
        left,
        right,
        background: computedBackground ,
      }"
    >
      <view v-for="(v, i) in list" :key="i" @click="confirm(v)">
        <i class="iconfont item-icon" :class="v.icon"></i>
        {{ v.name }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import propsMixin from "../mixins/props/index";
import {
  computed,
  defineProps,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
const emit = defineEmits(["update:modelValue", "change", "click"]);
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  ...propsMixin.props,
  style: {
    type: Object,
    default: () => {
      return {};
    },
  },
  nameClass: {
    type: String,
    default: "",
  },
  isPop: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "32rpx",
  },
  selectWidth: {
    type: String,
    default: "",
  },
  right: {
    type: String,
    default: "",
  },
  left: {
    type: String,
    default: "",
  },
  border: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
  modelValue: {
    type: [String, Number],
    default: 0,
  },
  list: {
    type: Array<any>,
    default: () => [],
  },
  range_key: {
    type: String,
    default: "name",
  },
  range_value: {
    type: String,
    default: "id",
  },
  immediate: {
    type: Boolean,
    default: false,
  },
  display: {
    type: String,
    default: "inline-flex",
  },
  hint: {
    type: String,
    default: "请选择",
  },
});
const state = reactive({
  name: "",
  num: 0,
  oldHeight: 0,
  isFold: false,
  heights: "auto",
  row: {},
  show: false,
});
const { name, num, oldHeight, isFold, heights, row, show } = toRefs(state);
const computedBackground = computed(() => {
  if (props.background.includes("data") || props.background.includes("http")) {
    return `url(${props.background})`;
  }
  if (props.isOpenPattern) {
    return proxy.$color.theme.background;
  }
  return props.background || proxy.$color.theme.background;
});
onMounted(async () => {
  let obj = await proxy.$getNode(".select", this);
  state.oldHeight = obj.height;
  state.heights = "0";
  if (props.immediate) {
    let ov = props.list.findIndex(
      (v) => v[props.range_value] == props.modelValue
    );
    state.isFold = true;
    confirm({
      id: ov > 0 ? ov : 0,
    });
  }
});
watch(
  () => props.modelValue,
  (n) => {
    if (!n) return;
    let obj = props.list.find((v) => v[props.range_value] == n) || {};
    state.name = obj[props.range_key];
  },
  { immediate: true }
);

const fole = () => {
  if (props.isPop) return emit("click");
  state.isFold = !state.isFold;
  if (state.isFold) {
    state.show = true;
    state.heights = JSON.parse(JSON.stringify(state.oldHeight));
  } else {
    state.heights = "0";
    state.show = false;
  }
};
const confirm = (v: any) => {
  let index = props.list.findIndex((y) => y.id == v.id);
  let label = props.list[index > 0 ? index : 0][props.range_key];
  let value = props.list[index > 0 ? index : 0][props.range_value];
  state.name = label;
  state.row = {
    name: label,
    id: value,
  };
  emit("update:modelValue", value);
  emit("change", value);
  fole();
};
</script>

<style lang="less" scoped>
.item-icon {
  margin-right: 10rpx;
}

.icon {
  transition: all 0.2s;
}

.boxShadow {
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.16);
}

.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

.c-select {
  // flex: 1;
  width: 100%;
  position: relative;
  display: inline-block;
  user-select: none;

  .title-box {
    width: 100%;
    // flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4rpx;
    font-size: 40rpx;
    .icon-xiala {
      margin-left: 10rpx;
    }
  }

  .select {
    max-height: 200rpx;
    position: absolute;
    top: 60rpx;
    right: 0;
    left: 0;
    border-radius: 20rpx;
    background-color: #fff;
    z-index: 1000;
    overflow: auto;
    transition: all 0.2s;

    & > view {
      height: 86rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      cursor: pointer;
      border-bottom: #f5f5f5 solid 1rpx;
      // color: #333333;
    }

    // &>view:hover {
    // 	background-color: #f5f5f5;
    // 	color: #333;
    // }
  }
}
</style>
